<template>
    <div class="pb-5 ps-3 pe-3"  style="width:100%">
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="bg_col_info h-100">
                    <el-row class="pt-2" style="height:56px;">
                        <el-col :span="6" class="d-flex justify-content-center">
                            <el-avatar :size="50">
                                <img src="/imgs/guorui_logo.jpeg"/>
                            </el-avatar>
                        </el-col>
                        <el-col :span="18">
                            <div class="customer_name">美好未来资产管理股份有限公司</div>
                            <div class="customer_info">广东 深圳</div>
                        </el-col>
                    </el-row>
                    <div class="pt-4 pb-3 ps-3 border-bottom">
                        <el-row v-for="(item,index) in customerInfo" style="height:30px;">
                            <el-col :span="9" class="customer_info">
                                <span class="pe-1">
                                    <el-icon :size="14"> <component :is="item.icon"></component></el-icon>
                                </span>
                                {{ item.title }}
                            </el-col>
                            <el-col :span="15" class="customer_info">{{ item.value }}</el-col>
                        </el-row>
                    </div>
                    <div class="pt-4 pb-3 ps-3 border-bottom">
                        <el-row v-for="(item,index) in otherInfo" style="height:30px;">
                            <el-col :span="9" class="customer_info">
                                <span class="pe-1">
                                    <el-icon :size="14"> <component :is="item.icon"></component></el-icon>
                                </span>
                                {{ item.title }}
                            </el-col>
                        </el-row>
                    </div>
                    <div class="pt-4 pb-3 ps-3 border-bottom">
                        <el-row v-for="(item,index) in otherInfo1" style="height:30px;" class="customer_info">
                            <el-col :span="9">
                                <span class="pe-1">
                                    <el-icon :size="14"> <component :is="item.icon"></component></el-icon>
                                </span>
                                {{ item.title }}
                            </el-col>
                            <el-col :span="15">
                                <span v-for="item1 in item.tagging" class="tagging me-2"> {{ item1 }}</span>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="pt-4 pb-3 ps-3 border-bottom">
                        <el-row v-for="(item,index) in otherInfo2" style="height:30px;" class="customer_info">
                            <el-col :span="9">
                                <span class="pe-1">
                                    <el-icon :size="14"> <component :is="item.icon"></component></el-icon>
                                </span>
                                {{ item.title }}
                            </el-col>
                            <el-col :span="15">
                                <span v-for="item1 in item.tagging" class="tagging me-2"> {{ item1 }}</span>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="pt-4 pb-3 ps-3">
                        <el-row v-for="(item,index) in riskLevel" style="height:30px;" class="customer_info">
                            <el-col :span="9">
                                <span class="pe-1">
                                    <el-icon :size="14"> <component :is="item.icon"></component></el-icon>
                                </span>
                                {{ item.title }}
                            </el-col>
                            <el-col :span="15">
                                <span v-for="item1 in item.tagging" class="tagging me-2"> {{ item1 }}</span>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="bg_col h-100">
                    <div class="mid_content">
                        <div class="mid_header">交易历史</div>
                        <div class="mid_item">
                            <el-table size="small" :data="traceTableData" border highlight-current-row stripe style="width: 100%" max-height="210">
                                <el-table-column prop="no" label="项目编码"/>
                                <el-table-column prop="name" label="项目名称"/>
                                <el-table-column prop="type" label="交易类型"/>
                                <el-table-column prop="amout" label="成交价格 (万元)" />
                                <el-table-column prop="date" label="成交日期" />
                                <el-table-column fixed="right" label="操作" width="80">
                                    <template #default="scope">
                                        <el-button
                                            link
                                            type="primary"
                                            size="small"
                                            @click.prevent="deleteRow(scope.$index)"
                                        >
                                            查看详情
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                    <div class="mid_content">
                        <div class="mid_header">资产智能推荐</div>
                        <div class="mid_item ">
                            <el-table size="small" :data="traceTableData1" border highlight-current-row stripe style="width: 100%" max-height="210">
                                <el-table-column prop="no" label="项目名称"/>
                                <el-table-column prop="name" label="债权总额 (万元)"/>
                                <el-table-column prop="type" label="标的物资产类型"/>
                                <el-table-column prop="amout" label="标的物的所在地" />
                                <el-table-column prop="date" label="挂牌价 (万元)" />
                                <el-table-column fixed="right" label="操作" width="80">
                                    <template #default="scope">
                                        <el-button
                                            link
                                            type="primary"
                                            size="small"
                                            @click.prevent="deleteRow(scope.$index)"
                                        >
                                            查看详情
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                    <div class="mid_content">
                        <div class="mid_header">沟通记录 & 行为数据分析</div>
                        <div class="mid_item ps-2" v-for="(item, index) in transactions">
                            {{ index + 1 + '.'+ item }}
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="6" class="bg_col">
                <div class="d-flex justify-content-end pb-2">
                    <el-button type="success">
                        <span class="pe-2">
                            <el-icon :size="18"> <component :is="'MagicStick'"></component></el-icon>
                        </span>
                        AI分析
                    </el-button>
                </div>
                <el-collapse v-model="activeName" accordion class="bg_collapse border p-2">
                    <el-collapse-item 
                        v-for="(item,index) in collapseList" 
                        :title="item.title"
                        :name="index+1+''"
                    >
                        <div class="coll_content p-2">
                            <div v-for="content in item.content">{{ content }}</div>
                        </div>
                    </el-collapse-item>
                </el-collapse>
            </el-col>
        </el-row>
    </div>
</template>
<script setup lang="ts">
    import { ref, reactive } from 'vue'

    const activeName = ref('1')

    const collapseList = reactive([
        {
            title:'工商信息',
            content:[
                '企业名称:汕头市国瑞医院有限公司',
                '工商注册号:440507000048812',
                '登记机关:汕头市市场监督管理局',
                '法定代表人名称:李锋刚',
                '成立日期:2013-10-08 00:00:00',
                '吊销日期:登记状态:在营（开业）企业',
                '省份:GD',
                '更新日期:2023-11-18 04:46:58',
                '统一社会信用代码:91440507079560544C',
                '注册资本:60000万元人民币',
                '企业性质:0',
                '注册地址:汕头市龙湖区中山路168号209室',
                '组织机构代码:07956054-4',
                '是否上市:未上市',
                '曾用名:无'
            ]
        },
        {
            title:'股东信息',
            content:['无']
        },
        {
            title:'主要人员',
            content:'1434'
        },
        {
            title:'分支机构',
            content:'123'
        },
        {
            title:'主营业务',
            content:[
                '经营范围:筹办（限筹备，不得作为经营凭证）。（依法须经批准的项目，经相关部门批准后方可开展经营活动）',
                '营业期限始:2013-10-08 00:00:00',
                '营业期限至:2033-10-08 00:00:00',
                '核准日期:2023-01-30 00:0'
            ]
        },
        {
            title:'经营风险',
            content:'123'
        },
        {
            title:'涉诉信息',
            content:'123'
        },
        {
            title:'企业年报',
            content:'123'
        },
        {
            title:'招行评级',
            content:'123'
        },
        {
            title:'失信信息',
            content:'123'
        },
    ])
    const traceTableData = reactive([
        {
            no:'FXHJ2311001',
            name:'汕头国瑞非金债权',
            type:'网络竞价',
            amout:'10000',
            date:'2023-12-06'
        },
        {
            no:'FXHJ2310005',
            name:'广东鸿禧集团有限公司债权',
            type:'网络竞价',
            amout:'5432',
            date:'2023-12-01'
        },
        {
            no:'FXHJ2309006',
            name:'四川亚科智能科技股份有限公司债权',
            type:'协议成交',
            amout:'4354',
            date:'2023-11-11'
        },
    ])
    const traceTableData1 = reactive([
        {
            no:'汕头国瑞非金债权',
            name:'123190',
            type:'商业房产',
            amout:'深圳',
            date:'22234'
        },
        {
            no:'广东鸿禧集团有限公司债权',
            name:'43240',
            type:'商业房产',
            amout:'广州',
            date:'8860'
        },
        {
            no:'四川亚科智能科技股份有限公司债权',
            name:'32600',
            type:'商业房产',
            amout:'东莞',
            date:'9200'
        },
    ])
    const transactions = reactive([
        '2023-11-08 总部拜访',
        '2023-11-05 电话沟通',
    ])
    const customerInfo = reactive([
        {
            icon:'User',
            title:'客户ID',
            value:'8000288666'
        },
        {
            icon:'Grid',
            title:'客户类型',
            value:'地方民营AMC'
        },
        {
            icon:'Aim',
            title:'行业地位',
            value:'地方Top 3'
        },
        {
            icon:'Smoking',
            title:'客户状态',
            value:'续存，已入会'
        },
        {
            icon:'Iphone',
            title:'联系人手机',
            value:'13988886666'
        },
        {
            icon:'Message',
            title:'联系人Email',
            value:'13988886666@mhwl.com'
        },
        {
            icon:'Location',
            title:'办公地址',
            value:'深圳湾超级总部'
        },
    ])
    const otherInfo = reactive([
        {
            icon:'StarFilled',
            title:'财务状况'
        },
        {
            icon:'ShoppingCartFull',
            title:'累计收入贡献'
        },
        {
            icon:'ShoppingCart',
            title:'今年收入贡献'
        },
    ])
    const otherInfo1 = reactive([
        {
            icon:'ColdDrink',
            title:'资产偏好',
            tagging: [
                '大湾区',
                '商业房产'
            ]
        }
    ])
    const otherInfo2 = reactive([
        {
            icon:'Sunrise',
            title:'活跃度',
            tagging: [
                '高',
            ]
        }
    ])
    const riskLevel = reactive([
        {
            icon:'Bell',
            title:'风险评级',
            tagging: [
                '中低风险',
            ]
        }
    ])
</script>
<style scoped>
    .el-row {
        height: 800px;
    }
    .bg_col {
        padding: 10px;
        background:#ecf5ff;
        border-radius: 10px;
        box-shadow: 5px 10px 10px -5px rgba(0, 0, 0, 0.5);
    }
    .bg_col_info {
        padding: 10px;
        background:#337ecc;
        border-radius: 10px;
        box-shadow: 5px 10px 10px -5px rgba(0, 0, 0, 0.5);
    }
    .bg_collapse {
        background: white;
    }
    .coll_content {
        background-color:#f4f4f5;
        height: 209px;
        overflow: auto;
    }
    .mid_content {
        height: 31.33%;
        background-color: white;
        margin: 5px 5px 15px 5px;
        border: 1px solid #c8c9cc;
    }
    .mid_header {
        height: 32px;
        background: #CDD0D6;
        padding: 4px;
    }
    .mid_item {
        font-size:13px;
        color:#303133;
        line-height: 1.7692307692;
    }
    .customer_name {
        font-weight: 600;
        color: white;
    }
    .customer_info {
        color:white;
        font-size:13px;
    }
    .tagging {
        padding: 1px;
        border: 1px solid white;
        border-radius: 3px;
    }
</style>